<template>
	<view>
		<view class="">
			<image src="/static/image/bg.png" mode="aspectFill" style="width: 100%;height: 400rpx;display: block;"></image>
		</view>
		<view class="content">
			<view class="cell flex align_center" style="font-size: 32rpx;" @click="sspShow = true" v-if="ssp_type == 1">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">矛盾类型</view>
				<view class="flex_1 text_end" :class="typeName?'hei':'hui'" style="margin-right: 16rpx;">{{typeName?typeName:'请选择矛盾类型'}}</view>
				<view class="">
					<u-icon name="arrow-right" color="rgba(0,0,0,.6)" size="28"></u-icon>
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;" @click="sspShow = true" v-if="ssp_type == 2">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">随手拍类型</view>
				<view class="flex_1 text_end" :class="typeName?'hei':'hui'" style="margin-right: 16rpx;">{{typeName?typeName:'请选择随手拍类型'}}</view>
				<view class="">
					<u-icon name="arrow-right" color="rgba(0,0,0,.6)" size="28"></u-icon>
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;" @click="sspShow = true" v-if="ssp_type == 3">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">应急类型</view>
				<view class="flex_1 text_end" :class="typeName?'hei':'hui'" style="margin-right: 16rpx;">{{typeName?typeName:'请选择应急类型'}}</view>
				<view class="">
					<u-icon name="arrow-right" color="rgba(0,0,0,.6)" size="28"></u-icon>
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">姓名</view>
				<view class="flex_1" style="margin-right: 44rpx;">
					<u-input v-model="userName" height='42rpx' type="text" placeholder='请输入申请人姓名' input-align='right' placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">联系电话</view>
				<view class="flex_1" style="margin-right: 44rpx;">
					<u-input v-model="phone" height='42rpx' type="number" placeholder='请输入申请人联系电话' :maxlength='11' input-align='right' placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;" @click="handleLocation">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">发生地</view>
				<view class="flex_1 width0 ellipsis text_end" :class="address?'hei':'hui'" style="margin-right: 16rpx;">{{address?address:'请选择地点'}}</view>
				<view class="">
					<u-icon name="map" color="rgba(0,0,0,.6)" size="32"></u-icon>
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;" @click="selectShow = true" >
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">交办人</view>
				<view class="flex_1 text_end" :class="jiaobanName?'hei':'hui'" style="margin-right: 16rpx;">{{jiaobanName?jiaobanName:'请选择交办人'}}</view>
				<view class="">
					<u-icon name="arrow-right" color="rgba(0,0,0,.6)" size="28"></u-icon>
				</view>
			</view>
			<view class="cell flex align_center" style="font-size: 32rpx;">
				<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
				<view class="">问题简述</view>
				<view class="flex_1" style="margin-right: 44rpx;">
					<u-input v-model="title" height='42rpx' type="text" placeholder='请输入问题简述' input-align='right' placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
				</view>
			</view>
			<view class="cell " style="font-size: 32rpx;">
				<view class="flex">
					<view class="" style="margin-right: 4rpx;color:#ff0000">*</view>
					<view class="">问题描述</view>
				</view>
				<view class="" style="margin: 16rpx 0;" >
					<u-input v-model="describe" :height='300' type="textarea" placeholder='案由（当事人产生纠纷的原因）'   placeholder-style='font-size:30rpx;font-weight:400;colr:rgba(0,0,0,.4)' :clearable='false' />
				</view>
				<view class="" style="margin: 16rpx 0;" v-if="tempFilePath">
					<view class="yuyinBox shodow flex align_center" style="width: 60%;" @click.stop="handleYuyinPaly()">
						<view class="" style="margin-right: 10rpx;">
							<image src="/static/image/yuyin_no.png" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="!lvfalg"></image>
							<image src="/static/image/yuyin_act.gif" mode="" style="width: 28rpx;height: 28rpx;display: block;" v-if="lvfalg"></image>
						</view>
						<view class="">{{lvDuration}}</view>
					</view>
				</view>
				<view class="anMcise flex align_center"  @longpress="longpressBtn"  @touchend="touchendBtn">
					<view class="" style="margin-right: 8rpx;">
						<u-icon name="mic" color="#fff" size="32"></u-icon>
					</view>
					<view class="" style="font-size: 30rpx;color: #fff;" v-show="!longTrue">按住说话语音描述</view>
					<view class="" v-show = 'longTrue'>
						<view class="voice-image">
							<view class="lines">
								<text class="hr hr1" ></text>
								<text class="hr hr2" ></text>
								<text class="hr hr3" ></text>
								<text class="hr hr4" ></text>
								<text class="hr hr5" ></text>
								<text class="hr hr6" ></text>
								<text class="hr hr7" ></text>
								<text class="hr hr8" ></text>
								<text class="hr hr9" ></text>
								<text class="hr hr10" ></text>
								<text class="hr hr11" ></text>
								<text class="hr hr12" ></text>
								<text class="hr hr13" ></text>
								<text class="hr hr14" ></text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cell" style="font-size: 32rpx;">
				<view class="flex">
					<view class="">上传材料</view>
				</view>
				<view class="hui" style="font-size: 24rpx;margin: 8rpx 0 24rpx;">支持上传图片和视频类型材料，请上传小于10M的视频</view>
				<view class="">
					<cl-upload v-model="fileList" :action="baseUrl + '/api/common/upload'" :headers='headers' @onSuccess="onSuccess" >
					</cl-upload>
				</view>
			</view>
		</view>
		<!-- 录音 -->
		
		<view class="" style="height: 120rpx;"></view>
		<view class="butBox shodowT">
			<view class="but flex_1" @click="handleQueren">确认提交</view>
		</view>
		
		<!-- 随手拍类型 -->
		<u-select v-model="sspShow" mode="single-column" value-name='id' label-name='name'  :list="ssplist" @confirm="sspConfirm"></u-select>
		<!-- 交办人下拉框 -->
		<u-select v-model="selectShow" mode="mutil-column-auto" value-name='id' label-name='name' child-name='children' :list="departmentList" @confirm="handelConfirm" @change='handelChange'></u-select>
		
	</view>
</template>

<script>
	const recorderManager = uni.getRecorderManager()  
	var init // 录制时长计时器  
	var timer // 播放 录制倒计时  
	import {
		apiGetDepartmentCategory,
		apiGetDepartmentPerson,
		apiSearchByname
	} from '@/api/department/department.js'
	import {
		getTypeList,
		getappealAdd
	} from '@/api/ssp/ssp.js'
	import CONFIG from '@/config/config.js'
	export default {
		  name: 'ssp_shangbao',
		  
		  data() {
			return {
			  id:'',
			  type: '',
			  title:'',
			  typeName: '',
			  jiaobanId:'',
			  jiaobanName:'',
			  userName: '',
			  phone: '',
			  address: '',
			  lat:0,
			  lng:0,
			  describe: '',
			  lvyinShow: false,
			  sspShow:false,
			  ssplist:[],
			  selectShow:false,
			  departmentList: [],
			  personList:[],
			  count: null, // 录制倒计时  
			  longPress: '1', // 1显示 按住说话 2显示 说话中  
			  time: 0, //录音时长  
			  duration: 60000, //录音最大值ms 60000/1分钟  
			  tempFilePath: '', //音频路径  
			  tempFilePathT:'',   //提交的音频路径
			  playStatus: 0, //录音播放状态 0:未播放 1:正在播放  
			  lvDuration:0,
			  lvfalg:false,
			  innerAudioContext:null,
			  clearTime:null,
			  
			  action:'',   //上传请求地址
			  fileList:[],   //上传返回地址
			  oploadData:{},   //上传图片的额外参数
			  
			  ssp_type:'',
			  baseUrl:'',
			  headers:{
				  token:uni.getStorageSync('token')
			  },
			  level: getApp().globalData.level,
			  
			  
			  longTrue:false
			};
		  },
		  async onLoad(e) {
			    let _this = this
				console.log(CONFIG.baseUrl)
				this.baseUrl = CONFIG.baseUrl
				if(uni.getStorageSync('userName')){
					this.userName = uni.getStorageSync('userName')
				}
				if(uni.getStorageSync('phone')){
					this.phone = uni.getStorageSync('phone')
				}
				this.ssp_type = this.$Route.query.type
				if(this.ssp_type == 1){
					uni.setNavigationBarTitle({
						title: '矛盾纠纷上报'
					});
				}else if(this.ssp_type == 2){
					uni.setNavigationBarTitle({
						title: '随手拍上报'
					});
				}else if(this.ssp_type == 3){
					uni.setNavigationBarTitle({
						title: '应急事件上报'
					});
				}
				this.getTypeList()
				this.innerAudioContext = uni.createInnerAudioContext();
				// 监听音频开始事件
				recorderManager.onStart((res) => {  
					console.log('开始',res)  
				})  
				recorderManager.onStop((res) => {
					
					this.lvDuration = Math.floor(((res.duration - 0) / 1000))        // 时间
					console.log('结束',res)
					uni.uploadFile({
						url: _this.baseUrl + '/api/common/upload', //仅为示例，非真实的接口地址
						filePath: res.tempFilePath,
						name: 'file',
						header: _this.headers,
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data));
							let _data = JSON.parse(uploadFileRes.data)
							this.tempFilePath = _data.data.fullurl  
							this.tempFilePathT = _data.data.url  
						},
						fail:rej=>{
							console.log('rej:',rej)
						}
					});
				}) 
				// this.id = 171
				await this.apiGetDepartmentCategory();
				//默认选中第一项
				this.apiGetDepartmentPerson(this.departmentList[0].id);
		  },
		  methods: {
			handleQueren(){  //提交
				if(this.type ==''){
					return uni.$u.toast('请选择上报类型')
				}
				if(this.userName ==''){
					return uni.$u.toast('请输入申请人姓名')
				}
				if(this.phone ==''){
					return uni.$u.toast('请输入申请人电话')
				}
				if(this.phone.length != 11){
					return uni.$u.toast('电话号码不正确')
				}
				if(this.address == ''){
					return uni.$u.toast('请选择地址')
				}
				if(this.title == ''){
					return uni.$u.toast('请输入问题简述')
				}
				if(this.jiaobanId == ''){
					return uni.$u.toast('请选择交办人')
				}
				let  arrUrl = []
				
				this.fileList.map((v,i)=>{
					arrUrl.push(v.fullurl)
				})
				arrUrl = arrUrl.join(',')
				let obj = {
					appear_type_id : this.type,
					appear_type : this.typeName,
					voice_file: this.tempFilePathT,
					voice_time: this.lvDuration,
					name:this.userName,
					phone:this.phone,
					content:this.describe,
					location:this.lng + ',' + this.lat,
					event_address:this.address,
					material_files:arrUrl,
					organization_id:this.jiaobanId,
					title:this.title,
					type:2,
				}
				getappealAdd(obj).then(res=>{
					console.log(res)
					uni.setStorageSync('userName',this.userName)
					uni.setStorageSync('phone',this.phone)
					uni.showToast({
						title:'上报成功！',
						icon:'none',
						duration:1500
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
				
			},
			getTypeList(){
				getTypeList({type:this.ssp_type}).then(res=>{
					console.log(res)
					this.ssplist = res.data
				})
			},
			handleLocation(){  // 选择地点
				console.log('选择地点')
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						_this.lat = res.latitude;
						_this.lng = res.longitude;
						_this.address = res.address;
						// longitude:'',  // 经度
						// latitude:'',   // 纬度
						// _this.objectData.address = res.address;
						// _this.objectData.longitude = res.longitude;
						// _this.objectData.latitude = res.latitude;
					},
					fail:res=>{
						console.log('失败：',res);
					}
				});
			},
			async handelChange(e){
				console.log('监听返回值：',e)
				if(e.column == 0){
					this.id = this.departmentList[e.value].id
					this.apiGetDepartmentPerson(this.id);
				}
			},
			handelConfirm(e){  //选择的移交人
				console.log(e)
				this.jiaobanName = e[1].label
				this.jiaobanId = e[1].value
			},
			//获取部门分类
			async apiGetDepartmentCategory() {
				// const res = await uni.$u.get('/api/v1/mapperApi', {mapper_url:'organization_classify/index'})
				const res = await apiGetDepartmentCategory(this.id)
				console.log('部门：',res)
				this.departmentList = res.data;
				this.departmentList.forEach(item => {
					item.isActive = false;
					item.image = CONFIG.baseUrl + item.image;
					item.children = []
				})
				console.log(res)
			},
			//获取部门下人员
			async apiGetDepartmentPerson(id) {
				const res = await apiGetDepartmentPerson(id);
				if (!res.data) {
					res.data = [];
				}
				console.log('人员：',res)
				this.personList = res.data;
				this.departmentList.map((v,i)=>{
					if(v.id == id){
						v.children = this.personList;
					}
				})
			},
			sspConfirm(e){
			   console.log(e)
			   this.type = e[0].value
			   this.typeName = e[0].label
			},
			onSuccess(e){
				console.log(e)
				this.fileList.push({path:e.data.fullurl,fullurl:e.data.url})
			},
			handleYuyinPaly(){  // 播放录音
				let _this = this
				if(this.clearTime){
					clearTimeout(_this.clearTime)
				}
				if(_this.lvfalg){   //关闭
					if(_this.innerAudioContext){
						_this.innerAudioContext.pause();
						_this.innerAudioContext.destroy()
						_this.innerAudioContext = null
					}
				}else{  //开启语音
					if(_this.innerAudioContext){
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = _this.tempFilePath;
						_this.clearTime = setTimeout(()=>{
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							_this.lvfalg = false
						},lvDuration)
					}else{
						_this.innerAudioContext = uni.createInnerAudioContext();
						_this.innerAudioContext.autoplay = true;
						_this.innerAudioContext.src = _this.tempFilePath;
						_this.clearTime = setTimeout(()=>{
							_this.innerAudioContext.pause();
							_this.innerAudioContext.destroy()
							_this.innerAudioContext = null
							_this.lvfalg = false
						},_this.lvDuration)
					}
				}
				_this.lvfalg = !_this.lvfalg
			},
			// 长按录音事件  
			longpressBtn(){  
				console.log(44);  
				this.longTrue = true
				let options = {  
					duration: this.duration, // 指定录音的时长，单位 ms  
					sampleRate: 16000, // 采样率  
					numberOfChannels: 1, // 录音通道数  
					encodeBitRate: 96000, // 编码码率  
					format: 'mp3', // 音频格式，有效值 aac/mp3  
					frameSize: 10, // 指定帧大小，单位 KB  
				}  
				recorderManager.start(options);  
				
			},  
			// 长按松开录音事件  
			touchendBtn(){  
				console.log(66);  
				 this.longTrue = false
				recorderManager.stop()  
			},
		  },
	};
</script>

<style lang="scss">
page,body{
	background: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: border-box;
}
.content{
	padding: 0 32rpx;
	.cell{
		padding: 32rpx 0;
		border-bottom: 1rpx solid rgba(0,0,0,.15);
		&:last-child{
			border-bottom: none;
		}
		.anMcise{
			width: 350rpx;
			padding: 16rpx 24rpx;
			border-radius: 38rpx;
			background: #2979ff;
			// width: fit-content;
		}
		.yuyinBox{
			padding: 20rpx 24rpx;
			border-radius: 34rpx;
			background:#2979ff;
			color:#fff;
		}
	}
}
.butBox{
	padding: 16rpx 32rpx;
	padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
	background: #fff;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	.but{
		color: #FFF;
		font-family: PingFang SC;
		font-size: 34rpx;
		font-weight: 500;
		line-height: 76rpx;
		border-radius: 10rpx;
		background: #2979ff;
		text-align: center;
	}
}
.text_end{
	text-align: end;
}


.voice-image{
            display: inline-flex;
            width: 204rpx;
            height: 30rpx;
            .lines{
                width: 100%;
                height: 100%;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
            }
        }
.hr{
        background-color: #fff;
        width: 4rpx;
        height: 100%;
        float: right;
    }
 
    .hr1{
        transform: scaleY(.6);
		animation:liner .5s -1s ease-in-out alternate infinite;
    }
    .hr2{
 animation:liner .5s -1.9s ease-in-out alternate infinite;
    }
    .hr3{
        transform: scaleY(.5);
		animation:liner .5s -1.2s ease-in-out alternate infinite;
    }
    .hr4{
 animation:liner .5s -1.7s ease-in-out alternate infinite;
    }
    .hr5{
        transform: scaleY(.6);
		animation:liner .5s -1.2s ease-in-out alternate infinite;
    }
    .hr6{
 animation:liner .5s -1.5s ease-in-out alternate infinite;
    }
    .hr7{
        transform: scaleY(.7);
		animation:liner .5s -1s ease-in-out alternate infinite;
    }
	.hr8{
	       transform: scaleY(.6);
			animation:liner .5s -1s ease-in-out alternate infinite;
	   }
	   .hr9{
	animation:liner .5s -1.9s ease-in-out alternate infinite;
	   }
	   .hr10{
	       transform: scaleY(.5);
			animation:liner .5s -1.2s ease-in-out alternate infinite;
	   }
	   .hr11{
	animation:liner .5s -1.7s ease-in-out alternate infinite;
	   }
	   .hr12{
	       transform: scaleY(.6);
			animation:liner .5s -1.2s ease-in-out alternate infinite;
	   }
	   .hr13{
	animation:liner .5s -1.5s ease-in-out alternate infinite;
	   }
	   .hr14{
	       transform: scaleY(.7);
			animation:liner .5s -1s ease-in-out alternate infinite;
	   }
    @keyframes liner {
        0% {
            transform: scaleY(.5);
        }
        100% {
            transform: scaleY(1);
        }
    }
</style>
